<template>
  <div>
    <myHeader :title=" 'tabbar-demo' " :color="'#fff'" :bgc=" '#0094ff' "></myHeader>
    <div class="main">
      <component :is="currentTab"></component>
    </div>
    <myTabBar @clickTab="clickTab" :tabBarList="tabBarList"></myTabBar>
  </div>
</template>
<script>
import myHeader from "./components/myHeader";
import myTabBar from "./components/myTabBar";
import myGoodList from "./view/myGoodList";
import mySearch from "./view/mySearch";
import userInfo from "./view/userInfo";
export default {
  components: {
    myHeader,
    myTabBar,
    myGoodList,
    mySearch,
    userInfo
  },
  data() {
    return {
      currentTab: "myGoodList",
      tabBarList: [
        {
          iconText: "icon-shangpinliebiao",
          text: "商品列表",
          componentName: "myGoodList"
        },
        {
          iconText: "icon-sousuo",
          text: "商品搜索",
          componentName: "mySearch"
        },
        {
          iconText: "icon-user",
          text: "我的信息",
          componentName: "userInfo"
        }
      ],
      dateList: []
    };
  },
  methods: {
    clickTab(i) {
      console.log(i);

      this.currentTab = this.tabBarList[i].componentName;
    }
  },
  created() {},
  mounted() {}
};
</script>

<style scoped>
.main {
  padding: 45px 0 50px 0;
}
</style>